/*!
 * Copyright (c) 2015-2020 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */


$topbarButtonPaddingTop = 7px
$gotoButtonSidePadding = 8px;
$gotoButtonSidePaddingNarrow = 3px;

$titleOwnLineMaxWidth = 1230px;

$tinyHeight = 420px;
$shortHeight = 500px;
$tallHeight = 650px;

html.js:not(.dw-react-started)
  .s_Tb_Pg_Cs,
  // Avoid flash-of-login-button when already logged in.
  .s_Tb_MyBs
    visibility: hidden;  // display:none not good, because then other elems too close

// Currently doesn't work without js
html:not(.js)
  .esOpenPagebarBtn,
  .esOpenWatchbarBtn,
  .s_Tb_MyBs
    display: none;
  .esTopbar
    padding: 20px 0 0;

.s_Tb
  z-index: 3;
  min-height: 40px;

// New:
.esTopbar
  display: flex;
  clearfix()
  pointer-events: none;
  background: none !important; // IE11

  .s_Tb_Pg_Cs,
  .esTopbar_custom,
  .s_Tb_MyBs,
  .dw-topbar-title,
  .esOpenPagebarBtn,
  .esOpenWatchbarBtn
    pointer-events: auto;

  //.caret
  //  display: none;  why not show? Comment out.

  .esAvtrName
    .btn
      padding-right: 0;

  .dw-login.dw-login.dw-login // oh well
    padding-top: 3px;
    padding-bottom: 4px;
    margin-top: 4px;
    top: 1px;
    position: relative;
    font-weight: bold;
    color: #fff;

  .esNotf
    [class^=icon-],
    [class*= icon-]
      font-size: 13px;

  .esNotf-unseen a
    background: hsl($uiHue, 100%, 95.5%);
    color: hsl($uiHue, 90%, 20%);
    margin-bottom: 2px;
    &:hover
      background: hsl(207,100%,90%);


.esTopbar_signUp
  margin-left: 7px;
  margin-right: 6px;

.esOpenPagebarBtn,
.esOpenWatchbarBtn
  border: none;
  position: relative;
  margin-top: 11px;
  padding: 12px 12px 9px 9px;
  z-index: 1;
.s_Tb-Fxd
  .esOpenPagebarBtn,
  .esOpenWatchbarBtn
    margin-top: 7px;
    padding-top: 9px;


.esOpenWatchbarBtn
  // Some distance, so won't look as if is part of any page title
  margin-right: 8px;
.esOpenPagebarBtn
  margin-left: 14px;


.s_Tb_Rw2
  ul, ol
    display: flex;
  li
    list-style: none;
    margin: 0 auto;
    a
      display: inline-block;
      padding: 9px 10px 11px;


// On small screens, show custom nav links, or page title,
// on the 2nd topbar row *if any*.
//
// If two rows, then, login and signup buttons, and MyMenu, are on row 2.
// Hide those on row 1.
.s_Tb-2Rws
  .s_Tb_Rw1
      .dw-login,
      .dw-a-tools,  // RENAME to s_Tb_Bs_ToolsB?
      .s_MMB
        display: none;

    // Skip: There're 2 rows because there's not enough space — then, looks weird
    // with any max-width, then there'd be even less space.  [page_max_width].
    //.container
    //  max-width: none !important;

  // If we show custom nav links on row 2, then, don't show on row 1 too.
  &.s_Tb-CuNvRw2
    .s_Tb_Rw1 .s_Tb_CuNv
      display: none;

  // If we show page title, categories, tags on row 2, then hide on row 1.
  &.s_Tb-TlRw2
    .s_Tb_Rw1 .s_Tb_Pg
      display: none;


.esOpenWatchbarBtn_text
  font-size: 14px;
  font-style: italic;

  /* How complicated! Just change the title to "Topics"  [open_wb_btn_ttl]
       instead of "Your topics".  Done.   CLEAN_UP  REMOVE
  // Line-wrap "Your topics" so won't collide with the forum title.
  @media (max-width: 1300px)
    max-width: 40px;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
  @media (max-width: $titleOwnLineMaxWidth)
    // The title is on its own line, so no need to word wrap.
    max-width: none;
  */
  @media (max-width: 600px)
    // Just show button icon, no space for title.
    display: none;

.esOpenPagebarBtn
  float: right;
html.es-pagebar-open
  .esOpenPagebarBtn
    display: none;

.esOpenCtxbarBtn_numOnline
  font-style: italic;
  margin: 0 1ex 0 5px;
  display: inline-block;
  white-space: initial;
  vertical-align: top;
  text-align: right;
  height: 0; // so won't push stuff below down (overflow: visible anyway)
  position: relative;
  top: -1px;
  .brief
    display: none;
  .icon-user
    color: #777;
  .icon-comment-empty
    top: -1px;
    position: relative;
  @media (max-width: 1540px)
    max-width: 50px;
  @media (max-width: 1320px)
    top: 0;
    margin-right: 3px;
    .brief
      display: inline;
    .detailed
      display: none;
  @media (max-width: 600px)
    display: none;
html.es-watchbar-open:not(.esSidebarsOverlayPage)
  .esOpenCtxbarBtn_numOnline
    @media (max-width: 1800px)
      max-width: 50px;
    @media (max-width: 1540px)
      top: 0;
      margin-right: 3px;
      .brief
        display: inline;
      .detailed
        display: none;
    @media (max-width: 800px)
      display: none;


.esOpenWatchbarBtn
  float: left;
html.es-watchbar-open
  .esOpenWatchbarBtn
    display: none;

// If the editor is open and to the left, the open-watchbar-button would be in the 
// editor, not in the page contents column.
html.c_Html-EdLeft #esPageColumn
  .esOpenWatchbarBtn
    display: none;

.s_Tb_Pg_Cs
  font-size: 15px;
  padding-top: 4px;
  position: relative;
  left: - $gotoButtonSidePadding;
  @media (max-width: $narrowLimit)
    left: - $gotoButtonSidePaddingNarrow;

.s_Tb_Pg_Cs
  > li
    margin: 0;
    list-style-type: none;
    display: inline-block;
    &:not(:last-child)::after  // also see: [40792RHL3], the '—>'' arrow
      content: "→";
      color: #666;
      font-size: 19px;
      vertical-align: middle;
      position: relative;
      top: -1px;
    > a
      color: #444;
      padding: $topbarButtonPaddingTop 8px 7px 8px;
      border: none;
      background: none;

.s_Tb_Pg_Cs_C-Dd
  crossGray();

.esTopbar_custom
  margin-top: 12px;
  display: inline-block;

.esTopbar_custom_title
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: bottom;
  font-size: 24px;
  letter-spacing: 0.2px;
  word-spacing: 0.4px;

.s_Tb_Ln
  vertical-align: bottom;
  margin-left: 15px;
  position: relative;
  top: 4px;
  font-size: $postFontSize;
  padding: 6px 11px 6px 8px;
  &.icon-reply:before
    margin-right: 4px;

.s_Tb-Fxd
  .dw-topbar-title
    margin-top: 3px;
  .s_Tb_Pg_Cs > li
    margin: 3px 0 0;
  .esTopbar_custom
    margin-top: 0;


.esTB_SearchBtn
  padding: 2px 5px 0px 4px;
  margin: 0;
  .icon-search
    color: hsl(0, 0%, 50%);
    font-size: 21px;
    margin: 0;
    padding: 0;

// MOVE to widgets.styl?
.c_SchD
  padding: 13px 5px 0 12px;
  max-width: @css{ min(600px, 100%) };

.c_SchD_QnB
  display: flex;
  justify-content: center;
  @media (max-width: 400px)
    flex-wrap: wrap;

  $marginBottom = 7px;
  $height = 34px;
  input[type='text']
    padding-left: 4px;
    min-width: 250px;
    vertical-align: middle;
    height: $height;
    width: 56ex;
    margin: 0 9px $marginBottom 0;
  .btn
    margin-bottom: $marginBottom;
    min-width: 80px;
    font-size: 15px;
    height: $height;

.c_SchD_X
  text-align: right;
  padding: 5px 0 1px;

.c_SchD_X_B
  padding: 1px 2px 2px;
  margin: 6px 0 2px 0;
  font-size: 14px;

  &:not(:last-child)
    margin-right: 1em;


.esTopbar .esAvtrName // hmm rename to .esAvtrYourName?
  display: inline-block;

  .btn
    padding-left: 3px !important;  // !important because of bat styles below in this file

  // Should remove weird styles from edAvtr. Oh well.
  .edAvtr
    vertical-align: middle;
    img
      &:hover
        opacity: 1;

  .esAvtrName_you,
  .esAvtrName_name
    color: #666;
    letter-spacing: 0.2px;
    vertical-align: middle;
    font-size: 13.5px;

  // Replace the user's perhaps long username with "You" if screen too narrow.
  .esAvtrName_you
    display: none;
  @media (max-width: 640px)
    .esAvtrName_name
      display: none;
    .esAvtrName_you
      display: inline-block;
  @media (max-width: 480px)
    .esAvtrName_you
      display: none;

.esNotfIcon
  display: inline-block;
  width: 21px;
  height: 21px;
  line-height: 20px;
  margin-left: 3px;
  border-radius: 50%;
  color: white;
  font-size: 15px;
  position: relative;
  text-align: center;

.esNotfIcon-wide
  width: 25px;

.esAvtrName .esNotfIcon
  top: 2px;
.esMenu .esNotfIcon
  top: -1px;
  &:first-child
    margin-left: 1px;
  &:last-child
    margin-right: 3px;

.esNotfIcon + .edAvtr,
.esAvtrName_name + .esNotfIcon
  margin-left: 6px;

.esNotfIcon-toMe
  background: hsl($uiHue, 100%, 44%)
.esNotfIcon-toOthers
  background: hsl($uiHue, 90%, 70%);
.esNotfIcon-other
  background: hsl(0, 0%, 73%);

.esNotfIcon-reviewUrgent
  background: hsl(0, 100%, 49%);
.esNotfIcon-reviewOther
  background: hsl(0, 100%, 75%);

// These are placed to the left of the avatar.
.esNotfIcon-reviewUrgent,
.esNotfIcon-reviewOther
  margin: 0 3px 0 0;  // otherwise only margin-left

@media (min-width: 700px)
  .s_MM
    max-width: 450px !important;  // instead of 89%, which is a lot, on wide screens [4YK8ST2]

.s_MMB-IsImp
  outline: 3px solid hsl(0, 100%, 60%);

.s_MM_ImpInfo
  margin: 0;
  padding: 10px 45px 0 20px;
  font-weight: bold;
  font-size: 15px;
  color: hsl(0, 100%, 41%);

.s_MMB-IsImp-Stranger
  color: hsl(0, 80%, 44%);
  font-weight: bold;

.DW .s_MM_StopImpB a
  background: hsl(0, 91%, 56%);
  display: inline-block;
  margin: 10px 0 11px 20px;
  color: white;
  font-weight: bold;
  font-size: 15.5px;
  padding: 9px 17px;
  &:hover
    background: hsl(0, 100%, 68%) !important;
    color: white !important;

.s_MM_ImpNotYour
  padding: 0 45px 13px 20px;
  color: hsl(0, 100%, 40%);
  font-style: italic;

.s_StillLoggedInWarning
  font-size: 15px;
  color: hsl(0, 100%, 40%);

$snoozeIconSize = 28px;

.s_MMB_Snz
  // Required for RTL languages, so the Snooze icon sticks together
  // with the "123h" (hours) text — otherwise the icon and the number "123"
  // get placed to the right of one's username & avatar, and the time unit
  // "h" (an RTL letter / word) to the left.
  display: inline-block;

.s_SnzI
  display: inline-block;
  height: $snoozeIconSize;

.s_MMB_Snz .s_SnzI
  margin: 0 4px 0 8px;
  position: relative;
  top: 1px;

.esMyMenu
  padding-right: 6px;
  position: relative;
  right: -6px;

.esMyMenu .esAvtr
  margin-right: 5px;

.esMyMenu_admin
  .icon-settings::before
    margin-left: 0;

// Shouldn't be too large, because it's better if *nothing* happens, when clicking in between
// these links and the close X button (see .esCloseCross just above).
// Hmm, what happens, is that the dialog closes though, because onContentClick calls
// this.closeDropdown. Oh well, barely matters.
.esMyMenu_admin,
.esMyMenu_adminHelp
  max-width: 200px;

.DW .s_MM_NotfsBs
  margin-bottom: 3px !important;
  a
    padding: 11px;
    &:first-child
      margin-left: 9px;  // 11px + 9px = 20px  [dropdown_a_padding]

.s_MM_SnzB
  padding-left: $snoozeIconSize + 2px !important;
  position: relative;

  .s_SnzI
    margin: 0 3px 0 0;
    position: absolute;
    left: 0;
    top: 6px;

.esTopbar
  position: relative;
  z-index: 5;

/* REMOVE this whole block ? CLEAN_UP
// Place the title on a separate line, if narrow screen, so the open-watchbar btn won't
// push it to the right.
html:not(.es-watchbar-open),
// If screen very narrow, always place title on separate line, so won't jump up/down when
// opening/closing  the watchbar.
html.esSidebarsOverlayPage
  .s_Tb:not(.s_Tb-Fxd):not(.s_Tb-2Rows)
    @media (max-width: $titleOwnLineMaxWidth)
      .dw-topbar-title
        clear: both;
        h1
          margin: 7px 0 6px;
      .esTopbar_ancestors
        clear: both;
        margin: 0;
        padding: 0; */


.esTopbar
  .dw-topbar-title
    float: left; // needed if window narrow
    .dw-t, .dw-p, .dw-p-bd, .dw-p-bd-blk
      margin: 0;
      padding: 0;
    h1
      margin: 33px 0 11px 0;
      padding-top: 0;
      font-size: 26px;

    /* CLEAN_UP REMOVE
    .container  // but it's *outside* .esTopbar in row 1?  dead code? (dead styles)
      @media (min-width: 800px)
        width: 350px;
      @media (min-width: 1100px)
        width: 600px;  */

.s_Tb_Pg_Cs .btn,
.s_Tb .btn.dw-login,
.s_Tb .btn.dw-a-tools
      font-size: 1em;
      &.dw-a-tools
          font-size: 13.5px;
      a
        color: #555;

      box-sizing: content-box;
      color: hsl(0, 0%, 23%);
      border: none;
      padding: $topbarButtonPaddingTop $gotoButtonSidePadding 7px $gotoButtonSidePadding;
      @media (max-width: $narrowLimit)
        padding-left: $gotoButtonSidePaddingNarrow;
        padding-right: $gotoButtonSidePaddingNarrow;

      &:hover
        color: hsl($uiHue, 100%, 20%);
        background: hsl($uiHue, 100%, 94%);

      min-width: 40px;

.s_Tb .btn.dw-a-tools
  font-size: 13.5px;
  margin-left: 0;  // now search btn to the left

.s_Tb-Stc .s_Tb_Rw1
  .s_Tb_CuLogo,
  .s_Tb_CuNv,
  .s_Tb_Pg_Cs,
  .s_Tb_MyBs
    margin-top: 15px;

.s_Tb
  .s_Tb_MyBs
    white-space: nowrap;
    .btn
      border-radius: 0;
      border: none;

    .dw-name
      font-weight: bold;
      color: hsl($uiHue, 48%, 50%);
      // Align with button texts, not sure why needed.
      position: relative;
      top: 2px;
      cursor: pointer;

      .icon-settings:before
        position: relative;
        top: 1px;

        span:before
          font-weight: bold;

.s_Tb_MyBs
  // Right align the search button and MyMenu — so there's space for a search text
  // input field.
  margin-left: auto;  // right aligns, in a flexbox
.s_Tb_Rw2 .s_Tb_CuNv
  // On any row 2, there's no search input. Then let the custom nav links get all space.
  flex: 1;

//.s_Tb_Rw2 .s_Tb_CuNv
//  margin-top: 0;  // excl directly instead?



// When at the top
//==============================

// Before we've scrolled down, the categories are show in the page column,
// but hidden in the topbar — there's not much space in the topbar,
// on mobile phones.

.esPage .s_Tb_Pg_Cs
  // Word break long cat names (cancel white-space: nowrap) otherwise they
  // won't fit on narrow screens, can cause horizontal scrolling.
  // (When in the topbar, though, we do overflow: hidden and ellipsis.)
  .esTopbar_ancestors_link
    white-space: normal;
    text-align: left;  // else, centered, looks weird
    // Can skip here, now done for the whole page instead [nicewrap]
    //overflow-wrap: anywhere;



// When scrolled down
//==============================


.s_Tb-Fxd
  z-index: 1010;
  background: white;
  // shrink -2px so won't overlap #esPageScrollable scrollbar
  box-shadow: 0 6px 9px -2px rgba(0,0,0,0.15); // shadow size dupl here: [topb_shdw]
  @media (max-height: $tallHeight - 1px)
    // Now, we've shrunk the topbar a bit — make the shadow stronger so
    // simpler to see where the topbar ends, now when smaller.
    box-shadow: 0 6px 9px -2px rgba(0,0,0,0.18);

  // Don't let topbar overlap scrollbar — but if window narrow, then probably a mobile, with
  // scrollbars hidden when not scrolling. Then leave margin as is = 0.
  // COULD use Modernizr's hiddenscroll test to find out:
  //   https://github.com/Modernizr/Modernizr/blob/master/feature-detects/hiddenscroll.js
  // COULD find the real scrollbar width:
  //   http://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript
  //   http://stackoverflow.com/questions/986937/how-can-i-get-the-browsers-scrollbar-sizes
  // Edit: Instead checking html.esSidebarsOverlayPage, see below [5FK7RS2]
  margin-right: 14px; // 14px works with FF, $pageScrollbarWidth only 13px.

  .esOpenWatchbarBtn_text,
  .esOpenCtxbarBtn_numOnline
    max-width: none; // otherwise a line wrap might make the topbar twice as tall
    font-size: $postFontSize;
    color: hsl(0, 0%, 30%);

  .esOpenWatchbarBtn_text,
  .esOpenCtxbarBtn_numOnline .detailed
    vertical-align: middle;

  .icon-left-open,
  .icon-right-open
    color: hsl(0, 0%, 30%);

  .esTopbar
    min-height: auto;

    margin: 4px 0;
    @media (max-height: 550px - 1)
      margin: 3px 0;
    @media (max-height: $tinyHeight - 1)
      margin: 1px 0;

    &.esTopbar-extraMargin
      margin: 8px 0 12px;

    .dw-topbar-title
      @media (max-width: 610px)
        display: none;
    h1.dw-p-ttl
      margin: 7px 0 0;
      font-size: 18px;

    // If no page title shown, then the categories font can be larger... (smaller_font)
    .s_Tb_Pg_Cs .btn
      font-size: 14px;

  // ... but if page title shown, then let the page title be larger, cats font smaller.

  $paddingLeftRight = 4px;

  &.s_Tb-Ttl .s_Tb_Pg
    position: relative;
    left: - $paddingLeftRight; // so the left padding below won't mess up hz alignment

    // Let the page title use as much free space as it needs, but if
    // there's too little space, then, shrink, so there's room for
    // the username menu  — apparently overflow: hidden makes a flex item
    // shrink if needed:
    // (If you want to test manually: [TyT692SKBDWJ74] — really long title)
    flex: 1;
    overflow: hidden;

    .s_Tb_Pg_Cs
      top: 1px;
      left: 0;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    .s_Tb_Pg_Cs .btn
      font-size: 13px;  // (smaller_font)
      padding: 4px $paddingLeftRight;
      min-width: 0;
      @media (max-height: $shortHeight - 1px)
        padding: 2px $paddingLeftRight;
    .s_Tb_Pg_Cs
      > li:not(:last-child)::after
        font-size: 14px;  // smaller arrow too, not just font (smaller_font)

  .s_Tb_Pg_Ttl
    font-size: 16px;
    padding: 2px $paddingLeftRight 2px;
    position: relative;
    top: -4px;
    pointer-events: auto;
    font-weight: bold;
    color: hsl(0 0% 25%);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    @media (max-height: $tallHeight - 1px)
      // Smaller screen, so smaller font — more space for the actual content.
      top: -2px;
      font-size: 15px;
      // Since smaller text, make font darker, so still looks important, like a title.
      color: hsl(0deg 0% 23%);
    @media (max-height: $shortHeight - 1px)
      font-size: 14px;
      color: hsl(0deg 0% 20%);

  // If no ancestor categories to show, then, make the title larger.
  &.s_Tb-NoCs .s_Tb_Pg_Ttl
    font-size: 18px;
    margin-top: 10px;  // else 0, top of screen

  .esTopbar
    .dw-login
      margin-top: 0 !important;

    /* Make buttons easier to click on small screens.
    .dw-login,
    .dw-a-tools
      padding-top: $topbarButtonPaddingTop;

    .esTopbar_ancestors_link
      padding-top: $topbarButtonPaddingTop;
      */

    .s_Tb_Pg_Cs,
    .s_Tb_MyBs
      margin-top: 0;
      padding-top: 0;

  // A title with categories takes a bit space — v-align MyMenu button by adding margin.
  &.s_Tb-Ttl.s_Tb-Cs
    .s_Tb_MyBs
      margin-top: 3px;
      @media (min-height: $shortHeight)
        margin-top: 6px;
      @media (min-height: $tallHeight)
        margin-top: 9px;

    .dropdown-toggle
      padding-top: 3px;
      padding-bottom: 3px;

// There's a topbar-padding-right that prenvents the topbar from overlapping the page scrollbar.
// Remove this padding when the topbar is full-width. See [5FK7RS2] above
html.esSidebarsOverlayPage .s_Tb-Fxd
  margin-right: 0;


// Small screen: Hide "Tools" button title, show only icon. A11N: svg image + alt text?
.dw-a-tools .s_Ttl
  display: none;


// Admin intro tips
//==============================


.s_AdmTps
  display: flex;

  .dw-help
    margin: 8px 0 (17px + $moveSectionTitleUpPx) 0;
    padding-top: 2px;
    color: hsl(0, 0%, 6%);
    background: $yellowTipsBackground;
    box-shadow: 5px 5px 7px rgba(0,0,0,0.33);

    &:not(:first-child)
      margin-left: 18px;

  .dw-help-text
    font-size: 15px;
    margin: 8px 20px 14px 0;  // so not too close to the close button (incl if line wrap)
    display: inline-block;
    a
      color: hsl(207, 100%, 41%);
      font-weight: bold;
      text-decoration: underline;
      &:hover
        color: hsl(207, 100%, 59%);

  .dw-hide
    display: inline-block;
    margin: 8px 0 6px 3px;
    float: none;
    position: static;
    color: hsl(207, 44%, 33%);
    &::before
      opacity: 0.75;



// Custom title, logo, links
//==============================

.s_Tb_CuLogo,
.s_Tb_CuNv
  pointer-events: auto;
  display: inline-block;



// vim: fdm=marker et ts=2 sw=2 tw=0 fo=r list
